<template>
  <pure-table
    ref="tableRef"
    row-key="skuId"
    align-whole="center"
    size="small"
    :data="formData!.skus!"
    :columns="tableHeaders"
  >
    <template #selectionHeader v-if="isAllCheck">
      <div class="flex">
        <el-checkbox
          v-model="checkAll"
          :indeterminate="isIndeterminate"
          @change="handleCheckAllChange"
        />
      </div>
    </template>
    <template #selection="scope">
      <div class="flex">
        <el-checkbox v-model="scope.row.isCheck" @change="handleSelectionChange(scope.row)" />
      </div>
    </template>
    <template #spuName="scope">
      <div class="flex items-center">
        <div>
          <el-image
            :preview-teleported="true"
            :src="scope.row.picUrl"
            class="w-[48px]! h-[48px]! m-r-10px rounded-4px align-middle"
          />
        </div>

        <el-text truncated>{{ scope.row.spuName }}</el-text>
      </div>
    </template>
    <!-- <template #extension="scope">
      <el-input v-model="scope.row.number" />
    </template> -->

    <!-- <template #empty>
      <Empty />
    </template> -->
  </pure-table>
</template>
<script lang="ts" setup>
import { PropType, Ref } from 'vue'
import { ElTable } from 'element-plus'
import { isEmpty } from '@/utils/is'

// import GiveGoodsForm from './GiveGoodsForm.vue'
// todo  用来做 spu 选择下的 sku 联动 已经实现 暂时没用  有更好的方式后 删除这个组件
defineOptions({ name: 'SkuListPure' })

const props = defineProps({
  propFormData: {
    type: Object as PropType<any>,
    default: () => {}
  },
  propertyList: {
    type: Array as PropType<any[]>,
    default: () => []
  },
  isAllCheck: {
    type: Boolean,
    default: () => false
  }
})
const formData: Ref<any | undefined> = ref<any>() // 表单数据

const tableHeaders = ref<{ prop: string; label: string }[]>([]) // 多属性表头
const checkAll = ref(false)
const isIndeterminate = ref(false)

const handleCheckAllChange = (val: boolean) => {
  isIndeterminate.value = false
  formData.value?.skus.forEach((ele) => {
    ele.isCheck = val
    handleSelectionChange(val)
  })
  // 点击最外层的全选
} //全选
const emit = defineEmits<{
  (e: 'selectionChange', spuData, value: any[]): void
}>()

/**
 * 选择时触发
 * @param Sku 传递过来的选中的 sku 是一个数组
 */
const handleSelectionChange = (skuInfo) => {
  const selectedSkuIds = formData.value?.skus
    ?.filter((ele) => {
      return ele.isCheck
    })
    .map((ele) => {
      return ele.skuId
    })
  const checkedCount = selectedSkuIds!.length
  console.log(checkedCount)

  const spuIsAllCheck = checkedCount == formData.value?.skus?.length
  const spuIsIndeterminate = checkedCount > 0 && checkedCount < formData.value?.skus?.length
  checkAll.value = spuIsAllCheck
  isIndeterminate.value = spuIsIndeterminate
  const spuId = skuInfo.spuId

  let spuData = {
    spuId,
    spuIsAllCheck,
    spuIsIndeterminate
  }
  emit('selectionChange', spuData, selectedSkuIds)
}
const updateCheckedStatus = () => {
  const selectedSkuIds = formData.value?.skus
    ?.filter((ele) => {
      return ele.isCheck
    })
    .map((ele) => {
      return ele.skuId
    })
  const checkedCount = selectedSkuIds!.length
  console.log(checkedCount)

  const spuIsAllCheck = checkedCount == formData.value?.skus?.length
  const spuIsIndeterminate = checkedCount > 0 && checkedCount < formData.value?.skus?.length
  checkAll.value = spuIsAllCheck
  isIndeterminate.value = spuIsIndeterminate
} //更新最外层的选中状态
/**
 * 将传进来的值赋值给 skuList
 */
watch(
  () => props.propFormData,
  (data) => {
    if (!data) return
    formData.value = data
    updateCheckedStatus()
  },
  {
    deep: true,
    immediate: true
  }
)

/** 监听属性列表，生成相关参数和表头 */
watch(
  () => props.propertyList,
  (propertyList: any[]) => {
    // 如果不是多规格则结束

    // 判断代理对象是否为空
    if (JSON.stringify(propertyList) === '[]') {
      return
    }
    // 重置表头
    tableHeaders.value = []
    // 生成表头

    tableHeaders.value = propertyList

    // 添加新属性没有属性值也不做处理
    if (propertyList.some((item) => !item.values || isEmpty(item.values))) {
      return
    }
  },
  {
    deep: true,
    immediate: true
  }
)
const activitySkuListRef = ref<InstanceType<typeof ElTable>>()

const getSkuTableRef = () => {
  return activitySkuListRef.value
}

// 暴露出生成 sku 方法，给添加属性成功时调用
defineExpose({ getSkuTableRef })
</script>
